<template>
  <div class="bg-ff margin-b150">
    <div v-if="!listTwo">
      <div v-for="(item,index) in list" :key="index" class="item_li" @click="change(item)">
        <div>{{item.title}}</div>
      </div>
    </div>

    <div v-if="listTwo && level >= 2 && !listThree">
      <div v-for="(item,index) in listTwo" :key="index" class="item_li" @click="changeTwo(item)">
        <div>{{item.title}}</div>
      </div>
    </div>

    <div v-if="listThree && level >= 3">
      <div v-for="(item,index) in listThree" :key="index" class="item_li" @click="changeThree(item)">
        <div>{{item.title}}</div>
      </div>
    </div>

    <div class="margin-t80" v-if="listThree">
      <div class="sure bg-ff0 text-ff text-center letter-10" @click="changeThree">保存</div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      list: [],
      listTwo: "",
      listThree: "",
      level: 0,
      idList: []
    };
  },
  mounted() {
    document.querySelector('html').style.backgroundColor = "#ffffff";
      this.level = this.$route.params.level
      this.list = this.$route.params.list
  },
  methods: {
    change(item) {
      this.idList[0] = item.id;
      this.$axios.post( "/common/lowerLevel", {
        id: item.id,
        manage_id: item.manage_id
      }).then(res => {
        if (this.level >= 2) {
          this.listTwo = res.data.data;
        }
      });
    },
    changeTwo(item) {
      this.idList[1] = item.id;
      if (this.level == 2) {
        this.changeThree();
        return false
      }
      this.$axios.post( "/common/lowerLevel", {
        id: item.id,
        manage_id: item.manage_id
      }).then(res => {
        if (this.level >= 3) {
          this.listThree = res.data.data;
        }
      });
    },
    changeThree(item) {
      let type = this.$route.params.type;
      if (item) {
        this.idList[2] = item.id;
      }
      if(this.idList.length == 0 && this.$route.params.notnull == 1){
        this.$toast('请选择完整~')
        return false
      }
      this.$axios.post( "/wap/personal/editUserInfo", {
        token: window.localStorage.getItem("token"),
        key: type,
        value: ',' + this.idList.join(',') + ','
      }).then(res => {
        this.$toast(res.data.msg);
        if (res.data.code == 0) {
          this.$router.go(-1);
        }
      });
    }
  }
};
</script>

<style scoped>
.item_li {
  border-bottom: 1px solid #eeeeee;
  padding: 0.4rem 2%;
}
</style>
<style>
html {
  background: white;
}
</style>